<template>
    <div class="baseInfo" v-if="info.productDetail != undefined">
        <swiper-box :picList="info.productDetail.prodcutPicList.slideshowUrls" :video="info.productDetail.video"></swiper-box>
        <div class="skuBox">
            <div class="goodName">{{ info.product.productTitle }}</div>
            <div class="trading">
                <div class="item" v-for="(item, index) in info.productDetail.tradeModeList" :key="index">
                    <div class="name">{{ item.code }}</div>
                    <div class="price">
                        <span class="currency">{{ item.currency }}</span>
                        <span><el-statistic :precision="2" :value="item.price"></el-statistic></span>
                        <span class="unit"> /台</span>
                    </div>
                </div>
            </div>
            <div class="skuItem">
                <span class="name">车辆品牌系列</span>
                <span class="content">{{ info.product.productInfo }}</span>
            </div>
            <div class="skuItem">
                <span class="name">支持付款方式</span>
                <div class="paymentType">
                    <div :class="query.payMode == item ? 'item active' : 'item'" @click="query.payMode = item" v-for="(item, index) in info.productDetail.payModeList" :key="index">
                        {{ item }}
                    </div>
                </div>
            </div>
            <div class="skuItem" v-if="info.harborInfo != undefined">
                <span class="name">起运港</span>
                <span class="content">{{ info.harborInfo.country }} {{ info.harborInfo.city }}
                    {{ info.harborInfo.harbor }}</span>
            </div>

            <div class="skuItem">
                <span class="name">选择数量</span>
                <el-input-number v-model="query.amount" @change="handleChange" :min="1" :max="info.product.stockAmount"></el-input-number>
                <span class="unit">台 库存({{ info.product.stockAmount }})台</span>
            </div>
            <div class="actions">
                <el-button type="primary" :icon="Goods" class="btn_gradient" @click="toCheckOrder">立即购买</el-button>
                <el-button type="primary" :icon="ShoppingCart" plain @click="addShoppingTrolley(info.product.id)">加入购物车</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import swiperBox from "./swiperBox.vue";
import { ref, getCurrentInstance, onMounted } from "vue";
import { Goods, ShoppingCart } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useStore } from "@/pinia/index.js";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const emit = defineEmits(["change"]);
const { proxy } = getCurrentInstance();
const loading = ref(false);
const props = defineProps({
    info: {
        type: Object,
        default: () => { },
    },
});
const query = ref({
    amount: 1,
    payMode: props.info.productDetail.payModeList[0]
});
const toCheckOrder = () => {
    router.push({
        path: "/Order/ConfirmOrder",
        query: {
            productId: props.info.product.id,
            amount: query.value.amount,
            scene: 0,
            payMode: query.value.payMode
        },
    });
};
const addShoppingTrolley = (id) => {
    query.value.productId = id;
    proxy
        .$post({
            url: "/buyerShoppingCart/insertCart",
            data: query.value,
        })
        .then(
            (res) => {
                ElMessage.success("已添加至购物车");
                store.getCartTotal();
                emit("change");
                loading.value = false;
            },
            () => {
                loading.value = false;
            }
        );
};
</script>
<style lang="less" scoped>
.baseInfo {
    display: flex;
    margin-bottom: 50px;

    .skuBox {
        margin-left: 56px;
        .actions {
            button {
                width: 143px;
                height: 44px;
            }
        }
        .skuItem {
            display: flex;
            margin-bottom: 30px;
            align-items: center;
            .name {
                font-size: 14px;
                color: #5e6163;
                line-height: 20px;
                margin-right: 50px;
            }
            .content {
                font-size: 14px;
                color: #26282a;
                line-height: 20px;
            }
            .unit {
                font-size: 12px;
                color: #5e6163;
                line-height: 17px;
                margin-left: 10px;
            }
            .paymentType {
                display: flex;
                .item {
                    cursor: pointer;
                    width: 76px;
                    background: #ffffff;
                    border-radius: 5px;
                    border: 1px solid #d9d9d9;
                    margin-right: 10px;
                    text-align: center;
                    line-height: 34px;
                    font-size: 14px;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #595959;
                    letter-spacing: 3px;
                    box-sizing: border-box;
                    &.active {
                        color: #3a85f5;
                        background: url(@/assets/img/sku_selected@2x.png) center
                            no-repeat;
                        background-size: 100%;
                        border: none;
                    }
                }
            }
        }
        .goodName {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #26282a;
            line-height: 28px;
        }
        .trading {
            width: 670px;
            height: 76px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 3px;
            margin: 15px auto 17px;
            .item {
                display: flex;
                align-items: baseline;
                font-family: DINAlternate-Bold, DINAlternate;
                margin-bottom: 20px;
                .name {
                    font-size: 16px;
                    font-weight: bold;
                    color: #26282a;
                    line-height: 19px;
                    margin-right: 38px;
                    width: 40px;
                }
                .price {
                    font-size: 24px;
                    font-weight: bold;
                    color: #ee5b5b;
                    line-height: 28px;
                    .el-statistic {
                        display: inline-block;
                    }
                    .currency {
                        font-size: 14px;
                        font-weight: bold;
                        color: #ee5b5b;
                        line-height: 16px;
                        margin-right: 10px;
                    }
                    .unit {
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #ee5b5b;
                        line-height: 17px;
                    }
                }
            }
        }
    }
}
</style>